<!-- personalDetails -->
<template>
  <div>
    <el-descriptions class="margin-top" title="个人信息" :column="column" >
      <template slot="extra">
        <el-button type="primary" size="small" @click="openFrom"
          >操作</el-button
        >
      </template>
      <el-descriptions-item label="用户名">{{ username }}</el-descriptions-item>
      <el-descriptions-item label="真实姓名">{{
        real_name
      }}</el-descriptions-item>
      <el-descriptions-item label="用户头像">
        <el-avatar :size="45" :src="avatar"></el-avatar>
      </el-descriptions-item>
      <el-descriptions-item label="性别">{{ gender }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{
        phone_number
      }}</el-descriptions-item>
      <el-descriptions-item label="微信">{{
        wechat_number
      }}</el-descriptions-item>
      <el-descriptions-item label="QQ">{{ qq_number }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ email }}</el-descriptions-item>
      <el-descriptions-item label="学校" v-if="authority === 'USER'">{{
        common_name
      }}</el-descriptions-item>
      <el-descriptions-item label="商户" v-if="authority === 'MERCHANT'">{{
        common_name
      }}</el-descriptions-item>
      <el-descriptions-item label="班级" v-if="authority === 'USER'">{{
        class_name
      }}</el-descriptions-item>
      <el-descriptions-item label="部门">{{ department }}</el-descriptions-item>
      <el-descriptions-item label="自我介绍">
        <el-tag size="small">{{ description }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 表单 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible" :before-close="dialogClose" width="80%">
      <el-form class="changeForm">
        <el-form-item label="头像" :label-width="formLabelWidth">
          <pan-thumb :image="from.avatar"
            ><el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="imagecropperShow = true"
            ></el-button
          ></pan-thumb>
        </el-form-item>
        <el-tooltip placement="top">
          <div slot="content">用户名必须为2位到64位</div>
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input
              v-model="from.username"
              autocomplete="off"
              class="usernameInput"
              ref="usernameInput"
            ></el-input>
          </el-form-item>
        </el-tooltip>

        <el-tooltip placement="top">
          <div slot="content">修改手机号请从登录安全中修改</div>
          <el-form-item label="手机" :label-width="formLabelWidth">
            <el-input
              v-model="phone_number"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-tooltip>
        <el-tooltip placement="top">
          <div slot="content">修改邮箱请从登录安全中修改</div>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="email" autocomplete="off" disabled></el-input>
          </el-form-item>
        </el-tooltip>

        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="from.gender">
            <el-option label="男" value="MALE"></el-option>
            <el-option label="女" value="FEMALE"></el-option>
            <el-option label="保密" value="UNKNOWN"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth">
          <el-input v-model="from.real_name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="微信号" :label-width="formLabelWidth">
          <el-input v-model="from.wechat_number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="QQ" :label-width="formLabelWidth">
          <el-input v-model="from.qq_number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="班级"
          :label-width="formLabelWidth"
          v-if="authority === 'USER'"
        >
          <el-input v-model="from.class_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="学校名字"
          :label-width="formLabelWidth"
          v-if="authority === 'USER'"
        >
          <el-input v-model="from.common_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="商户名字"
          :label-width="formLabelWidth"
          v-if="authority === 'MERCHANT'"
        >
          <el-input v-model="from.common_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth">
          <el-input v-model="from.department" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="自我描述" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="from.description"
            autocomplete="off"
            resize="vertical"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSelfMethod">确 定</el-button>
      </div>
    </el-dialog>
    <image-cropper
      v-show="imagecropperShow"
      :key="imagecropperKey"
      :width="300"
      :height="300"
      url="/resources-action/user/self/edit"
      :noSquare="true"
      lang-type="zh"
      @close="close"
      @crop-upload-success="cropSuccess"
      @crop-upload-fail="cropFail"
    />
  </div>
</template>

<script>
import ImageCropper from "@/components/ImageCropper";
import panThumb from "@/components/panThumb";
import { editSelf } from "@/api/user";
import { test_account_username } from "@/api/login";
export default {
  name: "personalDetails",
  components: { ImageCropper, panThumb },
  data() {
    return {
      imagecropperShow: false,
      imagecropperKey: 0,
      dialogFormVisible: false,
      formLabelWidth: "80px",
      username: "",
      authority: "",
      avatar: "",
      real_name: "",
      qq_number: "",
      description: "",
      class_name: "",
      common_name: "",
      department: "",
      wechat_number: "",
      gender: "",
      phone_number: "",
      from: {
        username: "",
        authority: "",
        avatar: "",
        real_name: "",
        qq_number: "",
        description: "",
        class_name: "",
        common_name: "",
        department: "",
        wechat_number: "",
        gender: "",
      },
      timerId: null,
      notusername: false,
      column:2
    };
  },
  watch: {
    "from.username"() {
      if (this.from.username !== "" && this.from.username !== this.username) {
        if (this.timerId !== null) {
          clearTimeout(this.timerId);
        }
        this.timerId = setTimeout(() => {
          if (this.from.username.length < 2 || this.from.username.length > 64) {
            this.notusername = "用户名必须为2位到64位";
          } else {
            test_account_username(this.from.username).then((data) => {
              if (data.data.message) {
                this.$message({
                  message: data.data.message,
                  type: "warning",
                });
                this.$refs.usernameInput.$refs.input.style.border =
                  "1px solid red";
                this.notusername = data.data.message;
              } else {
                this.$refs.usernameInput.$refs.input.style.border =
                  "1px solid #DCDFE6";
                this.notusername = false;
              }
            });
          }
          this.timerId = null;
        }, 300);
      }
    },
  },
  methods: {
    editSelfMethod() {
      Object.keys(this.from).forEach((item) => {
        if (item === "") item = "无";
      });
      if (!this.notusername) {
        editSelf(
          this.from.username === this.username ? null : this.from.username,
          this.from.avatar === this.avatar ? null : this.from.avatar,
          this.from.gender === this.gender ? null : this.from.gender,
          this.from.real_name === this.real_name ? null : this.from.real_name,
          this.from.wechat_number === this.wechat_number
            ? null
            : this.from.wechat_number,
          this.from.qq_number === this.qq_number ? null : this.from.qq_number,
          this.from.class_name === this.class_name
            ? null
            : this.from.class_name,
          this.from.common_name === this.common_name
            ? null
            : this.from.common_name,
          this.from.department === this.department
            ? null
            : this.from.department,
          this.from.description === this.description
            ? null
            : this.from.description
        )
          .then((result) => {
            this.$store.commit("user/SET_USERINFO", result.data);
            this.avatar = this.$store.state.user.avatar;
            this.username = this.$store.state.user.username;
            this.authority = this.$store.state.user.authority;
            this.real_name = this.$store.state.user.real_name;
            this.phone_number = this.$store.state.user.phone_number;
            this.qq_number = this.$store.state.user.qq_number;
            this.description = this.$store.state.user.description;
            this.class_name = this.$store.state.user.class_name;
            this.common_name = this.$store.state.user.common_name;
            this.department = this.$store.state.user.department;
            this.wechat_number = this.$store.state.user.wechat_number;
            if (result.data.gender === "MALE") {
              this.gender = "男";
            } else if (result.data.gender === "FEMALE") {
              this.gender = "女";
            } else {
              this.gender = "保密";
            }
            this.$message.success("信息修改成功");
            this.dialogFormVisible = false;
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message.warning(this.notusername);
      }
    },
    cropSuccess(resData) {
      this.imagecropperShow = false;
      this.imagecropperKey = this.imagecropperKey + 1;
      this.from.avatar = resData;
    },
    cropFail(error) {
      console.log(error);
    },
    close() {
      this.imagecropperShow = false;
    },
    openFrom() {
      this.dialogFormVisible = true;
      this.from.username = this.username;
      this.from.avatar = this.avatar;
      this.from.real_name = this.real_name;
      this.from.gender = this.gender;
      this.from.wechat_number = this.wechat_number;
      this.from.qq_number = this.qq_number;
      this.from.class_name = this.class_name;
      this.from.common_name = this.common_name;
      this.from.department = this.department;
      this.from.description = this.description;
      if (this.$refs.usernameInput !== undefined) {
        this.$refs.usernameInput.$refs.input.style.border = "1px solid #DCDFE6";
      }
      this.notusername = false;
      document.querySelector(".nav").style.zIndex="19"
    },
    dialogClose(){
      this.dialogFormVisible = false;
      document.querySelector(".nav").style.zIndex="99"
    }
  },
  created() {
    this.username = this.$store.state.user.username;
    this.authority = this.$store.state.user.authority;
    this.avatar = this.$store.state.user.avatar;
    this.real_name = this.$store.state.user.real_name;
    this.phone_number = this.$store.state.user.phone_number;
    this.qq_number = this.$store.state.user.qq_number;
    this.description = this.$store.state.user.description;
    this.class_name = this.$store.state.user.class_name;
    this.common_name = this.$store.state.user.common_name;
    this.department = this.$store.state.user.department;
    this.wechat_number = this.$store.state.user.wechat_number;
    this.gender = this.$store.state.user.gender;
    if (this.gender === "MALE") {
      this.gender = "男";
    } else if (this.gender === "FEMALE") {
      this.gender = "女";
    } else {
      this.gender = "保密";
    }
    this.email = this.$store.state.user.email;
    if(window.innerWidth <550){
      this.column = 1;
    }
  },
};
</script>

<style lang='scss' scoped>
.changeForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.el-form-item {
  width: 300px;
}
</style>